TeraHoster

WELCOME

Created: 07/27/2017

Team:ThemeKolor

Author:Pleurat

E-mail / Support: hello@themekolor.co

Thank you for purchasing our Template :)

We are very happy that you have chosen TeraHoster HTML5 Template to start your own web project. If you need any further assistance please contact our lovely team hello@themekolor.co

Why TeraHoster

TeraHoster is a clean,unique,colorful,professional and fully responsive Web Hosting Template.It looks perfect on all major browsers, tablets and smartphones.TeraHoster is definitely a great solution for your web project.




TeraHoster Features



How to install


1. FTP Upload


2. How to costumize


2.1 First of all you need a code editor

2.2To have it easier, you should get an advanced code editor such as Brackets, Sublime or Notepad ++. We recommend to use Bracket, which you can download it here Bracket page


3. Costumization

We have created different types of Style Boxes, Title ,Testimonials ,Headers etc, which are pretty easy to change and arrange.


3.1 Default Title / Example



3.2 How to Edit This Title

First you have to find his HTML Code

Open one of our pages (e.g Index.html) and search for this code:

<div class"universal-title">

<h1> What Makes Tera Hoster Awesome <h1>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet libero sit labore. <p>

</div>


*As it can be seen,you can edit text between<H1>...<H1> and <P>...<P>


4. How to Costumize Page Headers


Here's an example of what a header looks like


4.1 How to costumize

Editing header text is very easy.

Below you have his HTML code which you need to edit.You can do that by using Text Editor (in our case - bracket):


TeraHoster

*As it can be seen,it is very easy to edit the content inside Header 1.To do that you just need to edit text between <h4>...<h4> and <li>...<li>




6. How to use Style Sheets (CSS)


Cascading Style Sheets (CSS) are now the standard way to define the presentation of your HTML pages, from fonts and colours to the complete layout of a page.

To open Style Sheets (like Megamenu-Style.css,navigation.css,Default-Style.css,Summer-Style.css etc) you need the same code editor as in HTML.

CSS Toplogy


1.General Style
1.1 Font Size and Color
1.3 Transition Effect and Duration
1.4 Buttons
1.5 Links
1.6 Hover Effect
1.7 Animations
1.8 FontAwesome Icons
2. Preload
2.1Here you can style our Page Preloader

3.Top bar
3.1 Contact info,social icons and My Account Button
4.Navbar
4.1 Mega Menu
4.2 Default List Menu with target links

5.Headers and Sliders
5.1 Page Headers (dedicaed,cloud,wordpress etc) and Home Sliders

6.Other Sections
6.1 Here you can find Pricing Tables,Features,Faq,Testimonials etc
7.Footer

6.1 Finding Our CSS Styles

CSS Styles are inside TeraHoster.zip file (TeraHoster.zip/HTML/main_file/style/):

Open TeraHoster.zip > main_file > HTML > style


6.2 How to make changes

As it can be seen,we have two Different Home Pages and all use different Style Sheets.


Index-Default.html use Default-Style.css

Index-2.html use Index2.css


If we want to style Index-Default,then we need to open his Style Sheet (default-style.css).

Here's an example of what a default-style.css code looks like


TeraHoster



7. How to use Parallax Effect


We are using one of the best bootstrap parallax plugin.

To know more about Parallax Effect and how to use it,please follow this official author link: http://pixelcog.github.io/parallax.js/


8. How to use FontAwesome icons


Please follow this official fontawesome link: http://fontawesome.io/examples/



6.1 WHMCS THEME Costumization


We have made very easy to costumize WHMCS Theme.You need to edit only two files : Header.tpl and Footer.tpl (the edit procedure is the same as html pages)

Follow these simple steps :

Open TeraHoster.zip > whmcs-theme > Inside of WHMCS Theme folder search for : header.tpl and footer.tpl
once you find those files,you have to open with one of your text editors (notepad,notepad++,brackets etc),same as HTML pages.


6.1.2 CSS File of WHMCS


Inside WHMCS Theme you will see a folder called "css",open that folder and you will se a lot of CSS Files.To make changes to TeraHoster you need to open "New-Style.css" . These are the files that you need to use if you want to make custom design for WHMCS Theme.

6.2 How to edit content inside header.tpl and footer.tpl

Edit Header.tpl

For example if you want to change this text : WHAT MAKES TERAHOSTER AWESOME,then you have to open header.tpl

Open header.tpl and search for that text (see the example):


How to edit footer.tpl

Footer costumization procedure is the same as header.tpl.Open footer.tpl and you can edit the content very easily.

After the changes have been made and you have save it,finally you can install your template (if you allready have done that,you can transfer header.tpl and footer.tpl to whmcs-theme folder).


7. How to use Parallax Effect


We are using one of the best bootstrap parallax plugin.

To know more about Parallax Effect and how to use it,please follow this official author link: http://pixelcog.github.io/parallax.js/




Note: The images used on the demo site are for demonstration purposes only and are not included in the download file.

If You need further information or assisstance,please contact our lovely team : hello@themekolor.co